feat(progress-bar): add recipe and tokens by thetaPC · Pull Request #31087 · ionic-team/ionic-framework

thetaPC · 2026-04-17T18:24:24Z

Issue number: internal

What is the current behavior?

Component styles for ion-progress-bar are fragmented across multiple files (native and ionic). The md and ios themes rely on the native styles. Developers were restricted to those themes and how those themes structured the logic and styles.

What is the new behavior?

Unified Style Architecture: Combined theme-specific styling into a single progress-bar.scss file that consumes CSS variables, ensuring a single source of truth for component logic.
Element-First Token Structure: Refactored the IonProgressBar type and tokens to use an element-first hierarchy ({type}.{element}.{state}, e.g., determinate.progress.default.background). This provides predictability and consistency with the rest of the system.
Defined TypeScript Interface: Added progress-bar.interfaces.ts with reusable types for the recipe and config.
Defined Theme Defaults: Added per-theme token defaults in ios, md, and ionic theme files.
Shape Support: Introduced round and rectangular shape variants with per-theme defaults (round for ios and ionic, rectangular for md).
Solid State Styling: Introduced dedicated styles for when the progress bar is fully buffered (buffer = 1), including separate rules for the buffer bar and buffer circles.
Type-Scoped CSS: Split generic buffer bar styles into type-specific selectors (progress-bar-type-determinate / progress-bar-type-indeterminate) to prevent cross-type style bleed.
Updated CSS Variables: Replaced --background and --progress-background with a structured set of semantic variables (e.g., --ion-progress-bar-determinate-progress-default-background).
Updated Tests: Added shape snapshot tests.

Does this introduce a breaking change?

Yes
No

This PR introduces breaking changes to how IonProgressBar is styled.

Migration Path:

Token Updates: Update any custom theme configurations to match the new nested structure.
CSS Variable Replacements: --background and --progress-background have been removed. Use the new token structure instead:
- --background → IonProgressBar.determinate.buffer.bar.default.background (or the indeterminate equivalent)
- --progress-background → IonProgressBar.determinate.progress.default.background (or the indeterminate equivalent)

If per-component customization is needed, the CSS variables can be used directly (e.g., --ion-progress-bar-determinate-progress-default-background).

Host class names: The type classes on the host element have been renamed to include the prop name:
- .progress-bar-determinate → .progress-bar-type-determinate
- .progress-bar-indeterminate → .progress-bar-type-indeterminate
Theme classes: Remove any instances that target the theme classes: ion-progress-bar.md, ion-progress-bar.ios.

Other information

Previews:
Previews:

vercel · 2026-04-17T18:24:29Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Apr 28, 2026 5:54pm

ShaneK

Looking good! Just a couple things I noticed but I could be off base

ShaneK · 2026-04-21T15:18:12Z

    },

+    IonProgressBar: {
+      height: 'var(--token-scale-100, var(--ion-scaling-100))',


var(--token-scale-100, var(--ion-scaling-100)) wraps a --token-* variable I couldn't find defined anywhere in the repo. Same on lines 532 and 538 with --token-round-xs and --token-rectangular-xs. Is this intentional scaffolding for the ionic modular work? If not, the other component entries in this file (IonChip, IonSpinner, IonItemDivider) reference --ion-* directly, so maybe this should too? Not sure.

Ah, I meant to add a comment here.

You're right that --token-* variables don't exist in this repo. They're defined in the OS project. The intent was to make it easier for the components team to adopt the Ionic token file in the future by referencing --token-* first with --ion-* as a fallback. The components team can override values at the token level without having to make as many changes here. If we approve this change, I plan to go back to the others and add the --token-* variables through a different PR. I figured if it gets denied, then no need to do that extra work. 😅

Don't we plan to have them override all of these? Like they will redefine this, changing both variables:

height: 'var(--token-space-100, var(--token-scale-100, 4px)',

I'm hoping that they don't plan on overriding them especially by having it first check for the --token-*. With the fact that their token system changing frequently, it might be best for us to use --token-* instead of the internal token system. So if the value of --token-scale-100 was 4px but then changes to 6px, they won't have to make an update on this repo because the token is still accurate, just the value changed. This is my reason of why I want to add their CSS variables. Does that answer your question?

I thought the goal was to not have the themes behave differently from each other. By adding another layer of tokens here we are doing that.

Understood! Then I'll revert to what we've been doing.

ShaneK · 2026-04-21T15:18:23Z

+  );
+}
+
+:host(.progress-bar-solid) .buffer-circles {


When progress-bar-solid is set, the render function applies ion-hide (display: none !important) to the parent .buffer-circles-container, so this .buffer-circles rule inside it can't paint. Is the plan to drop the ion-hide toggle later and let CSS handle the hide, or is this rule dead?

Good catch! 6a19f57

It sounds like we will keep ion-hide but just a different class name.

thetaPC · 2026-04-22T22:32:27Z

-      class={{ 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }}
+      class={{
+        'buffer-circles-container': true,
+        'buffer-circles-container-hidden': finalBuffer === 1,


I added this class now so it would be easier to replace when we remove ion-hide.

ShaneK

Looks great, Maria! Awesome work! Just two minor nits, but non-blocking

Co-authored-by: Shane <shane@shanessite.net>

brandyscarney

Great work on this! 💪

brandyscarney · 2026-04-27T14:16:58Z

    },

+    IonProgressBar: {
+      height: 'var(--token-scale-100, var(--ion-scaling-100))',


Don't we plan to have them override all of these? Like they will redefine this, changing both variables:

height: 'var(--token-space-100, var(--token-scale-100, 4px)',

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

feat(progress-bar): add recipe and tokens

184a126

github-actions Bot added the package: core @ionic/core package label Apr 17, 2026

feat(progress-bar): add recipe and tokens pt2

cf033e1

vercel Bot had a problem deploying to Preview April 17, 2026 18:24 Failure

github-actions Bot added the package: angular @ionic/angular package label Apr 17, 2026

vercel Bot deployed to Preview April 17, 2026 18:26 View deployment

thetaPC added 2 commits April 17, 2026 14:24

feat(progress-bar): more buffer bar styles

87d6c29

test(progress-bar): update determinate test page

9367f06

vercel Bot deployed to Preview April 17, 2026 21:29 View deployment

vercel Bot deployed to Preview April 17, 2026 21:32 View deployment

refactor(progress-bar): cleanup styles

98e77da

vercel Bot deployed to Preview April 17, 2026 23:09 View deployment

chore(progress-bar): run build

10f28df

vercel Bot deployed to Preview April 17, 2026 23:11 View deployment

feat(progress-bar): cleanup

2fbeade

vercel Bot deployed to Preview April 20, 2026 17:18 View deployment

test(progress-bar): add shape snapshots

326eb02

vercel Bot deployed to Preview April 20, 2026 17:23 View deployment

chore(progress-bar): run build

c7aa16d

vercel Bot deployed to Preview April 20, 2026 17:28 View deployment

feat(progress-bar): remove theme files

535cc52

vercel Bot deployed to Preview April 20, 2026 18:03 View deployment

feat(progress-bar): update interfaces

bd16e5a

vercel Bot deployed to Preview April 20, 2026 18:15 View deployment

docs(chip): remove line

7212005

vercel Bot deployed to Preview April 20, 2026 18:17 View deployment

thetaPC added 2 commits April 20, 2026 11:18

feat(progress-bar): add ionColor

85829fe

feat(progress-bar): use ionColor

bda0296

vercel Bot deployed to Preview April 20, 2026 18:20 View deployment

ShaneK requested changes Apr 21, 2026

View reviewed changes

feat(progress-bar): remove unused styles

6a19f57

vercel Bot deployed to Preview April 22, 2026 18:45 View deployment

chore(progress-bar): run build

e2dcf68

vercel Bot deployed to Preview April 22, 2026 20:27 View deployment

refactor(progress-bar): replace ion-hide

bd86b8b

vercel Bot deployed to Preview April 22, 2026 22:09 View deployment

fix(progress-bar): revert virtualProp

bf2d8a4

vercel Bot deployed to Preview April 22, 2026 22:16 View deployment

feat(progress-bar): add shape constant

e96a032

vercel Bot deployed to Preview April 22, 2026 22:21 View deployment

fix(progress-bar): add ion-hide back

0c4b4bd

thetaPC commented Apr 22, 2026

View reviewed changes

vercel Bot deployed to Preview April 22, 2026 22:33 View deployment

thetaPC requested review from ShaneK and removed request for OS-jacobbell April 22, 2026 22:50

ShaneK approved these changes Apr 24, 2026

View reviewed changes

Comment thread core/src/components/progress-bar/progress-bar.tsx Outdated

Comment thread core/src/components/progress-bar/progress-bar.tsx

docs(progress-bar): use correct class

069befe

Co-authored-by: Shane <shane@shanessite.net>

vercel Bot deployed to Preview April 24, 2026 14:01 View deployment

refactor(progress-bar): switch to true

c48f5b9

vercel Bot deployed to Preview April 24, 2026 14:07 View deployment

brandyscarney approved these changes Apr 27, 2026

View reviewed changes

docs(progress-bar) remove extra asterisk

62f395e

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

vercel Bot deployed to Preview April 28, 2026 13:38 View deployment

chore(progress-bar): update components.d.ts

3e9a5bb

vercel Bot deployed to Preview April 28, 2026 13:41 View deployment

feat(ionic): remove --token-*

e7ecbe9

vercel Bot deployed to Preview April 28, 2026 17:54 View deployment

thetaPC merged commit a392a46 into ionic-modular Apr 28, 2026
49 checks passed

thetaPC deleted the FW-6857 branch April 28, 2026 22:12

Conversation

thetaPC commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel Bot commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

thetaPC commented Apr 17, 2026 •

edited

Loading

vercel Bot commented Apr 17, 2026 •

edited

Loading